<template>
  <div class="lecturer">
    <van-nav-bar
      title="讲师列表"
      left-arrow
      :fixed="true"
      :placeholder="true"
      :z-index="999"
      :safe-area-inset-top="true"
      @click-left="goBack"
    />
    <div class="tab-list">
      <van-tabs color="#5881db" v-model="activeName" @click="changeTab">
        <van-tab title-class="tab-item" title="全部" name="all"></van-tab>
        <van-tab
          title-class="tab-item"
          :title="item.title"
          :name="item.uuid"
          v-for="(item, index) in lecturerGrade"
          :key="index"
        ></van-tab>
      </van-tabs>
    </div>
    <!-- 讲师列表 -->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="lecturer-list">
        <div class="nodata" v-if="!loading && lecturerList.length == 0">
          <img src="@static/img/nodata.png" alt="" />
        </div>
        <div class="lecturer-item" v-for="(item, index) in lecturerList" :key="index" @click="gotoDetail(item)">
          <div class="lecturer-cont">
            <div class="img">
              <img :src="item.lectorAvatar" alt="" />
              <div class="sex" :class="{ 'man': item.sex == 'man', 'woman': item.sex == 'woman' }">
                <i class="iconfont icon-icon2" v-if="item.sex == 'man'"></i>
                <i class="iconfont icon-icon1" v-else></i>
              </div>
            </div>
            <div class="lecturer-data">
              <div class="name">
                {{item.lectorName}}
              </div>
              <div class="people">{{ item.lectorGradeName }}</div>
              <div class="bottom">
                <div>课程：{{ item.courseCount }}</div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { getLecturerList, getLecturerGrade } from '@/api/lecturer'
export default {
  name: 'lecturer',
  components: {  },
  data() {
    return {
      from: this.$route.query.from, // 首页还是我的页面跳转
      activeName: 'all',
      gradeId: '', // 等级ID
      searchValue: '', // 搜索关键词
      lecturerList: [], // 讲师列表
      loading: false,
      finished: false,
      page: 1,
      pageSize: 8,
      lecturerGrade: [] // 等级列表
    }
  },
  computed: {},
  mounted() {
    this.getLecturerGrade()
  },
  methods: {
    goBack() {
      if (this.from == 'mine') {
        this.$router.replace({
          path: '/mine'
        })
      } else {
        this.$router.replace({
          path: '/index'
        })
      }
    },
    // 切换等级
    changeTab(name, title) {
      console.log(name)
      if (name == 'all') {
        this.gradeId = ''
      } else {
        this.gradeId = name
      }
      this.lecturerList = []
      this.page = 1
      this.getLecturerLists()
    },
    onLoad() {
      this.getLecturerLists()
    },
    // 获取讲师等级列表
    getLecturerGrade() {
      getLecturerGrade().then(res => {
        this.lecturerGrade = res.data
      })
    },
    // 获取课程列表
    getLecturerLists() {
      getLecturerList({
        pageNum: this.page,
        pageSize: this.pageSize,
        lectorGrade: this.gradeId
      }).then(res => {
        if (res.code == '200') {
          this.lecturerList = this.lecturerList.concat(res.rows)
          this.loading = false
          if (res.rows.length < this.pageSize) {
            this.finished = true
          } else {
            if (res.rows.length == res.total) {
              this.finished = true
            } else {
              this.page++
            }
          }
        }
      })
    },
    // 查看详情页
    gotoDetail(item) {
      this.$router.push({
        name: 'lecturerDetail',
        query: {
          uuid: item.lectorId
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
@import 'index';
</style>
